<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     .timespan{
         background-color: yellow;
         border: 1px solid rgb(247, 7, 7);
     }
    </style>
    <script>
        function getdate() {
            let tody = new Date();
            let divDate = document.getElementById("date");
            divDate.innerHTML = "今天是" + tody.getFullYear() + "年" + (tody.getMonth() + 1) + "月" + tody.getDay() + "日"
            divDate.innerHTML += "星期" + tody.getDay();
        }
        function getTime(location="div1",flag=false) {
            let time = new Date();
            let div1 = document.getElementById(location);
            let template = `<span class="timespan">${time.getHours()}</span>&nbsp : &nbsp<span class="timespan">${ time.getMinutes()}</span>&nbsp : &nbsp<span class="timespan">${ time.getSeconds()}</span>`
            div1.innerHTML =template; 
            if(flag){
                timeoutId=setTimeout("getTime('div1',true)", 1000);
            }
            
        }
        function init() {
            getdate();
            getTime("div1",true);
            getTime("div2");
            setInterval("getTime('div2')" ,1000);
            let btn1 = document.querySelector(".btn1").addEventListener("click",(event)=>{
                if(event.target.innerHTML=="停止"){
                    clearTimeout(timeoutId);
                    event.target.innerHTML="开始";
                }else{
                    getTime("div1",true);
                    event.target.innerHTML="停止";
                }
                
            },false)

        }
        let timeoutId;
        window.addEventListener("load", init, false);
    </script>
</head>

<body>
    <div id="date"></div>
    <hr>
    <div>
        setTimeout()函数和 clearTimeout() 练习
    </div>
    <br>
    <div id="div1">

    </div><br>
    <button class="btn1">停止</button><br>
    <hr>
    <div>
            setInteval()函数和 clearInterval() 练习
    </div><br>
    <div id="div2"></div><br>
    <button id="btn2">停止</button>
</body>

</html>